<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=Rokkitt:wght@600;700&display=swap"
      rel="stylesheet"
    />
    <title>登录模块</title>
  </head>
  <body>
    <!-- 全局容器 -->
    <div class="flex items-center justify-center min-h-screen bg-rose-50">
      <!-- 卡片容器 -->
      <div
        class="relative flex flex-col md-6 space-y-10 bg-white shadow-2xl rounded-2xl md:flex-row md:space-y-0 md:m-0"
      >
        <!-- 左边 -->
        <div class="p-6 md:p-20">
          <!-- 顶部 -->
          <h2 class="font-mono mb-5 text-4xl font-bold">登录</h2>
          <p class="max-w-sm mb-12 font-sans font-light text-gray-600">
            登录您的帐户以上传或下载图片、视频或音乐。
          </p>
          <input
            type="text"
            class="w-full p-6 border border-gray-300 rounded-md placeholder:font-sans placeholder:font-light"
            placeholder="输入你的邮箱地址"
          />

          <!-- 中间 -->
          <div
            class="flex flex-col items-center justify-between mt-6 space-y-6 md:flex-row md:space-y-0"
          >
            <a href="" class="font-thin text-cyan-700">忘记密码</a>
            <button
              class="flex w-full md:w-auto justify-center items-center p-6 space-x-4 font-sans font-bold text-white rounded-md shadow-sm px-9 bg-cyan-700 shadow-cyan-100 border transition hover:bg-opacity-90 hover:shadow-lg hover:-translate-y-0.5 duration-150"
            >
              <span>下一步</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-7"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="#ffffff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <line x1="5" y1="12" x2="19" y2="12" />
                <line x1="13" y1="18" x2="19" y2="12" />
                <line x1="13" y1="6" x2="19" y2="12" />
              </svg>
            </button>
          </div>

          <!-- 边框 -->
          <div class="mt-12 border-b border-b-gray-300"></div>

          <!-- 底部 -->
          <p class="py-6 text-sm font-thin text-center text-gray-400">
            或者通过以下方式登录
          </p>
          <!-- 第三方登录 -->
          <div
            class="flex flex-col space-x-0 space-y-6 md:flex-row md:space-x-4 md:space-y-0"
          >
            <button
              class="flex w-full md:w-1/2 items-center justify-center py-2 space-x-3 border border-gray-300 rounded shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition duration-200"
            >
              <img src="/facebook.png" alt="" class="w-9" />
              <span class="font-thin">Facebook</span>
            </button>
            <button
              class="flex w-full md:w-1/2 items-center justify-center py-2 space-x-3 border border-gray-300 rounded shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition duration-200"
            >
              <img src="/google.png" alt="" class="w-9" />
              <span class="font-thin">Google</span>
            </button>
          </div>
        </div>
        <!-- 右边 -->
        <img src="/image.jpg" alt="" class="w-[430px] hidden md:block" />
        <!-- 关闭按钮 -->
        <div
          class="group absolute -top-5 right-4 flex items-center justify-center w-10 h-10 bg-gray-200 rounded-full md:bg-white md:top-4 hover:cursor-pointer hover:-translate-y-0.5 transition duration-150"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-6 h-6 text-black group-hover:text-gray-600"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
